<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{$shopinfo.shop_name}商品上传</title>
    <script src="static/shop/js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/shop/js/iscroll-zoom.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/shop/js/hammer.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/shop/js/lrz.all.bundle.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/shop/js/jquery.photoClip.min.js" type="text/javascript" charset="utf-8"></script>
</head>
	<style>
        body {
            margin: 0;
            background-color: #eee;
            box-sizing: border-box;
        }

        .chunk {
            border: solid 1px #eee;
            background-color: white;
            display: flex;
            padding: 15px 10px;

        }

        .chunk-left {
            width: 30%;
        }

        .chunk-right {
            width: 70%;
            display: flex;
            justify-content: space-between;
            color: rgb(174, 175, 175);
        }

        .confirmBtn {
            width: 80%;
            height: 50px;
            line-height: 50px;
            background-color: #0057c8;
            text-align: center;
            margin: 30px auto;
            color: white;
            font-size: 20px;
            border-radius: 10px;
        }



        .shade {
            background-color: rgba(78, 77, 77, 0.2);
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
        }

        .shade-white {
            width: 100%;
            height: 60vw;
            background-color: white;
            position: absolute;
            left: 0;
            bottom: 0;
        }

        .shade-header {
            display: flex;
            /* width: 100%; */
            justify-content: space-between;
            padding: 15px 10px;
        }
        .select{
            width:100%;
            height:100%;
            font-size:16px;
            border:0px solid #000;
            background-color: #FFF;
        }
        .input{
            font-size:20px;
            border:0px solid #000;
            height:28px
        }
    </style>
    <style >
        
        .map{
            /* padding: 3vw 3vw 5vw 3vw; */
            display: flex;
            flex-flow: wrap;
        }
        .picture{
            width: 100%;
            /* height: 100px; */
            margin-right: 3vw; 
            display: flex;
            flex-wrap: wrap;
        }
        .picture img{
            width: 30vw;
            height: 30vw;
            margin: 1vw 1vw;
        }

        #choose-btn{
            display: flex;
            width: 20vw;
            height: 20vw;
            border: solid 0.5vw rgb(207, 207, 207);
            color: rgb(207, 207, 207);
            font-size:20vw;
            font-weight: bold;
            text-align: center;
            background-size: 100% 100%;
            justify-content: center;
            align-items: center;
            margin: 0 1vw;
            font-weight: normal;
        }
        
        .updata{
            background-color: rgb(0, 102, 255);
            color: white;
            width: 100px;
            height: 30px;
        }
        .b{
            width: 100px;
            height: 100px;
            position: relative;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            padding: 5px;
            margin: 5px
        }
        .b img{
            width: 100%;
            height: 100%;

        }
        body{
            margin: 0;
            text-align: center;
            box-sizing: border-box;
        }
        .A{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .X{
            background-color: rgb(0, 102, 255);;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            position: absolute;
            top: 0;
            right: 0;
            border-radius: 50%;
            border: none;
        }
        .c{
            width: 80%;
            height: 30px;
            margin: 5px 0;
        }
        #choose-btn{
            display: flex;
            width:100px;
            height: 100px;
            border: solid 0.5vw rgb(207, 207, 207);
            color: rgb(207, 207, 207);
            font-size:20vw;
            font-weight: bold;
            text-align: center;
            background-size: 100% 100%;
            justify-content: center;
            align-items: center;
            /* padding: 5px; */
            margin: 10px 5px;
            font-weight: normal;
        }
        .choose-btn{
             display: flex;
            width:100px;
            height: 100px;
            border: solid 0.5vw rgb(207, 207, 207);
            color: rgb(207, 207, 207);
            font-size:20vw;
            font-weight: bold;
            text-align: center;
            background-size: 100% 100%;
            justify-content: center;
            align-items: center;
            /* padding: 5px; */
            margin: 10px 5px;
            font-weight: normal;
        }
       
        
    </style>
<body>
   

    <form action="{:url('goodAdd')}" method="post"  enctype="multipart/form-data">
    <div>
    	<div class="chunk" >
            <div class="chunk-left">商品名称</div>
            <div class="chunk-right" >
                <input type="text" placeholder="请输入商品名称" class="input" required="required" name="goods_name" style="width:140px"/>
            </div>
        </div>
        <div class="chunk" >
            <div class="chunk-left">商品描述</div>
            <div class="chunk-right" >
                <input type="text" placeholder="商品描述" class="input" required="required" name="introduction" style="width:200px"/>
            </div>
        </div>
        <div class="chunk" >
            <div class="chunk-left">选择分类:</div>
            <div class="chunk-right">
                <select  class="select"  id="category_id" name="category_id">
                    {volist name="category" id="vol"}
                    <option value="{$vol.category_id}">{$vol.category_name}</option>
                    {/volist}
                    
                </select>
            </div>
        </div>
        <div class="chunk" >
            <div class="chunk-left">商品价格:</div>
            <div class="chunk-right" >
                <input type="text" placeholder="商品价格" class="input" required="required" name="price" style="width:140px" onkeyup="this.value=this.value.replace(/[^0-9\.]/g,'')"/>
            </div>
        </div>
        <div class="chunk" >
            <div class="chunk-left">商品图片:</div>
            <div class="chunk-right" >
                <div class="map">
                   
                    <input type="file" accept="image/*" id="file"  name="file">
                   
                </div>
            </div>
        </div>
        
        <div class="chunk">
            <input type="submit" class="confirmBtn" value="确认"    style="margin:0 auto;"/>
        </div>
       

    </div> 
    </form>

</body>

</html>


    
